// 当加载一个比较大的图片的时候；
// 先显示一个小的图片；
// 等待大的图片加载完成之后，然后将小的图片设置透明度为 0； 

<template>
  <div class="ImageLoader-content">
    <!-- 占位符图片 -->
    <transition name="fade">
      <img
        class="hold"
        v-if="!isLoad"
        :style="{ transitionDuration: duration / 1000 + 's' }"
        :src="placeholder"
      />
    </transition>
    <!-- 加载图片 -->
    <img @load="originLoad" class="origin" :src="src" />
  </div>
</template>

<script>
export default {
  props: {
    // 原始图片
    src: {
      type: String,
      required: true,
    },
    // 占位图
    placeholder: {
      type: String,
      required: true,
    },
    // 变化时间
    duration: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      isLoad: false,
    };
  },
  methods: {
    // 当图片加载完毕之后，隐藏小图。
    // 抛出一个 load 事件；
    originLoad() {
      this.isLoad = true;
      this.$emit("load");
    },
  },
};
</script>

<style lang="less" scoped>
@import url(~@/style/mixin.less);
.ImageLoader-content {
  position: relative;
  width: 100%;
  height: 100%;
  img {
    object-fit: cover;
    .self-fill();
    display: block;

    &.hold {
      z-index: 1;
    }
    &.origin {
      z-index: 0;
    }
  }
  // 开始退出过渡
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  // 退出时的状态
  .fade-leave-to {
    opacity: 0;
  }
}
</style>